<template>
    <div id="byairtag" v-if="data && buyData">
        <div class="buy-at-head">
            <div class="buy-at-center980">
                <div class="buy-at-head-text">
                    <h2><a href="../HYL/family.html">AirTag</a></h2>
                </div>
            </div>
        </div>
        <div class="buy-at-content">
            <div class="buy-at-center980">
                <div class="buy-at-infrom">
                    <div class="buy-at-infrom-img">
                        <!-- <video muted autoplay="autoplay" aria-hidden="true" width="100%" height="100%">
								<source src="img/MP4/homepod-mini-select.mp4" type="video/mp4">
							</video> -->

                        <img
                            :src="
                                encodeImgUrl('airtag-double-select-202104.jfif')
                            "
                            v-if="packNow == -1"
                        />
                        <img
                            :src="buyData.data.productSet[packNow].proImg"
                            v-else
                        />

                        <div class="buy-at-infrom-svg">
                            <ul class="">
                                <li class="">
                                    <div>
                                        <svg
                                            viewBox="0 0 35 35"
                                            role="img"
                                            aria-hidden="true"
                                            width="35px"
                                            height="35px"
                                        >
                                            <path
                                                fill="none"
                                                d="M0 0h35v35H0z"
                                            ></path>
                                            <path
                                                d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748v9.471a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-4.538 2.446l9.651 5.566-4.4 2.5-9.823-5.58c.038-.026.07-.059.111-.081zM7.788 23.539A1.5 1.5 0 017 22.219v-9.471a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z"
                                            ></path>
                                        </svg>
                                    </div>
                                    <p class="">
                                        <span>免费送货</span>
                                    </p>
                                </li>

                                <li>
                                    <div>
                                        <svg
                                            viewBox="0 0 35 35"
                                            role="img"
                                            aria-hidden="true"
                                            width="35px"
                                            height="35px"
                                        >
                                            <rect
                                                width="35"
                                                height="35"
                                                fill="none"
                                            ></rect>
                                            <path
                                                d="M17.5,6.1A11.4,11.4,0,1,1,6.1,17.5,11.41294,11.41294,0,0,1,17.5,6.1m0-1.1A12.5,12.5,0,1,0,30,17.5,12.5,12.5,0,0,0,17.5,5Z"
                                            ></path>
                                            <path
                                                d="M9.0498,19.6626a.51614.51614,0,0,1,.65821-.541A25.70105,25.70105,0,0,0,17.4873,20.3208a25.68829,25.68829,0,0,0,7.77735-1.19922.52156.52156,0,0,1,.66015.541,8.34671,8.34671,0,0,1-8.4375,7.35547A8.35447,8.35447,0,0,1,9.0498,19.6626Zm15.2129,2.584a7.008,7.008,0,0,0,.73828-2.14941,26.8936,26.8936,0,0,1-7.51368,1.06738,26.91758,26.91758,0,0,1-7.51562-1.06738A7.086,7.086,0,0,0,10.71,22.24658a22.4677,22.4677,0,0,0,6.77734,1.041A22.45514,22.45514,0,0,0,24.2627,22.24658ZM12.332,14.74463a1.64578,1.64578,0,0,1,1.48926-1.75391,1.64676,1.64676,0,0,1,1.50391,1.75391,1.659,1.659,0,0,1-1.50391,1.7666A1.65823,1.65823,0,0,1,12.332,14.74463Zm7.31738,0A1.647,1.647,0,0,1,21.165,12.99072a1.64583,1.64583,0,0,1,1.49023,1.75391,1.65827,1.65827,0,0,1-1.49023,1.7666A1.65918,1.65918,0,0,1,19.64941,14.74463Z"
                                            ></path>
                                        </svg>
                                    </div>
                                    <p class="as-buystrip-title">
                                        <span>免费个性化镌刻服务</span>
                                    </p>
                                </li>
                                <li>
                                    <div>
                                        <svg
                                            viewBox="0 0 35 35"
                                            role="img"
                                            aria-hidden="true"
                                            width="35px"
                                            height="35px"
                                        >
                                            <path
                                                fill="none"
                                                d="M0 0h35v35H0z"
                                            ></path>
                                            <path
                                                d="M12.249 9.022l-4.461 2.4c-.041.022-.073.055-.111.081l9.823 5.588 4.4-2.5zM27.322 11.507c-.038-.025-.069-.058-.11-.081l-9-4.852a1.5 1.5 0 00-1.424 0l-3.5 1.889 9.628 5.55zM10.8 18.5a.5.5 0 01-.5.5H7v3.219a1.5 1.5 0 00.788 1.32l9 4.852a1.494 1.494 0 00.212.082V17.957l-9.931-5.645a1.494 1.494 0 00-.069.436V18h3.3a.5.5 0 01.5.5zM18 17.957v10.515a1.481 1.481 0 00.212-.082l9-4.851a1.5 1.5 0 00.788-1.32v-9.471a1.5 1.5 0 00-.069-.436z"
                                                fill="none"
                                            ></path>
                                            <path
                                                d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748V17h1v-4.252a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082l-9-4.852A1.5 1.5 0 017 22.219V20H6v2.219a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-9.11 4.932c.038-.026.07-.059.111-.081l4.461-2.4 9.651 5.561-4.4 2.5zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z"
                                            ></path>
                                            <path
                                                d="M2.507 18l1.646-1.646a.5.5 0 00-.707-.707l-2.5 2.5a.5.5 0 000 .707l2.5 2.5a.5.5 0 10.707-.707L2.507 19H6v-1zM10.3 19a.5.5 0 000-1H7v1zM6 18h1v1H6z"
                                            ></path>
                                        </svg>
                                    </div>
                                    <p class="">
                                        <span>简单免费的退货服务</span>
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="buyat-infrom-buttons">
                        <div class="buyat-infrom-btn-h1">
                            <h1>购买 AirTag</h1>
                        </div>
                        <div class="buyat-whitchOne">
                            <h2>你想要几件？</h2>
                            <div class="buyat-whitchOne-btn">
                                <div
                                    class="buyat-whitchOne-item"
                                    v-for="(pro, i) in buyData.data.productSet"
                                    :key="i"
                                    @click="changePack(i)"
                                    :class="{ active: packNow == i }"
                                >
                                    <span>{{ pro.title }}</span>
                                    <span>RMB {{ pro.price }}</span>
                                </div>
                                <!-- <div class="buyat-whitchOne-item">
										<span>四件装</span>
										<span>RMB 779</span>
									</div> -->
                            </div>
                        </div>
                        <div class="buyat-infrom-payabout">
                            <div class="buyat-price-pay">
                                <div class="buyat-price">
                                    <h1 v-if="packNow == -1">
                                        RMB <b>229</b>起
                                    </h1>
                                    <h1 v-else>
                                        RMB
                                        <b>{{
                                            buyData.data.productSet[packNow]
                                                .price
                                        }}</b>
                                    </h1>
                                    <span class="buyat-price-other"
                                        >含增值税及其他法定税费：约 RMB
                                        87<sup>‡</sup>。</span
                                    >
                                </div>
                            </div>
                            <div class="buyat-infrom-buyBtn">
                                <button
                                    id="buyat-addToBag"
                                    :class="{ showBtn: packNow >= 0 }"
                                    @click="addToShopBag"
                                >
                                    添加至购物袋
                                </button>
                            </div>
                            <div class="buyat-infrom-saveWapper">
                                <div class="buyat-save-item">
                                    <span>还拿不定主意？</span>
                                    <span
                                        >将此商品收藏到清单，方便回头再来挑选。</span
                                    >
                                </div>
                                <div class="buyat-save-iconSvg">
                                    <svg
                                        class="buyat-saveToWapper"
                                        width="35"
                                        height="35"
                                        role="img"
                                        aria-hidden="true"
                                    >
                                        <path
                                            fill="none"
                                            d="M0 0h35v35H0z"
                                        ></path>
                                        <path
                                            fill="#06c"
                                            d="M21.952 6.433a2.157 2.157 0 011.567.481A2.228 2.228 0 0124 8.516v19.866a.709.709 0 01-.018.178.7.7 0 01-.058-.013 8.985 8.985 0 01-.757-.674l-4.866-4.901a1.111 1.111 0 00-1.602 0l-4.857 4.891a7.25 7.25 0 01-.754.676.145.145 0 01-.053.028h-.015a.681.681 0 01-.02-.185V8.516a2.228 2.228 0 01.48-1.602 2.158 2.158 0 011.568-.48h8.904m0-1h-8.904a3.077 3.077 0 00-2.278.776A3.144 3.144 0 0010 8.516v19.866a1.276 1.276 0 00.276.868.956.956 0 00.76.317 1.073 1.073 0 00.632-.213 8.377 8.377 0 00.874-.776l4.866-4.9a.115.115 0 01.184 0l4.866 4.9a10.454 10.454 0 00.868.77 1.048 1.048 0 00.639.219.956.956 0 00.76-.317 1.276 1.276 0 00.275-.868V8.516a3.144 3.144 0 00-.77-2.306 3.077 3.077 0 00-2.278-.776z"
                                        ></path>
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <div class="buyat-infrom-otherText">
                            <p>
                                需要使用安装 iOS 14.5 或更新版本的 iPhone
                                SE、iPhone 6s 或后续机型，或 iPod touch
                                (第七代)；安装 iPadOS 14.5 或更新版本的 iPad
                                Pro、iPad (第五代或后续机型)、iPad Air 2
                                或后续机型、iPad mini 4 或后续机型。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="buy-at-row-gallery">
            <div class="buy-at-center980">
                <ul class="buyat-rgallery-imglist">
                    <li>
                        <img
                            :src="
                                encodeImgUrl(
                                    'airtag-gallery1-thumb-202104.jfif'
                                )
                            "
                        />
                    </li>
                    <li>
                        <img
                            :src="
                                encodeImgUrl(
                                    'airtag-gallery2-thumb-202104.jfif'
                                )
                            "
                        />
                    </li>
                    <li>
                        <img
                            :src="
                                encodeImgUrl(
                                    'airtag-gallery3-thumb-202104.jfif'
                                )
                            "
                        />
                    </li>
                    <li>
                        <img
                            :src="
                                encodeImgUrl(
                                    'airtag-gallery4-thumb-202104.jfif'
                                )
                            "
                        />
                    </li>
                    <li>
                        <img
                            :src="
                                encodeImgUrl(
                                    'airtag-gallery5-thumb-202104_GEO_CN.jfif'
                                )
                            "
                        />
                    </li>
                </ul>
            </div>
        </div>

        <div class="buy-at-userfull">
            <div class="buy-at-center980">
                <div class="buy-at-userfull-content">
                    <div class="buy-at-userfull-img">
                        <img
                            :src="
                                encodeImgUrl('airtag-findmy-202104_GEO_CN.jfif')
                            "
                        />
                    </div>
                    <div class="buy-at-userfull-text">
                        <h2>丢三落四这门绝技，<br />要‍失‍传‍了。</h2>
                        <p>
                            AirTag
                            可帮你轻松追踪并查找各种物品。只要给钥匙串上挂一个，再往背包里塞一个，就能在查找
                            app 里看到它们的位置了。有 AirTag 尽管放心吧。
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="buy-at-inItem">
            <div class="buy-at-center980">
                <div class="buy-at-inItem-text">
                    <h2>包装内容</h2>
                </div>
                <div class="buy-at-inItem-img">
                    <img :src="encodeImgUrl('airtag-witb-202104.jfif')" />
                </div>
                <div class="buy-at-inItem-smailtext">AirTag</div>
            </div>
        </div>
        <div class="buy-at-anotherItem">
            <div class="buy-at-center980">
                <div class="buy-at-Item-content">
                    <div class="buy-at-Item-content-img">
                        <img
                            :src="
                                encodeImgUrl('airtag-hermes-router-202104.jfif')
                            "
                        />
                    </div>
                    <div class="buy-at-Item-content-text">
                        <p>想选 AirTag 皮革扣环？</p>
                        <router-link to="/AirtagH">选购 ></router-link>
                    </div>
                </div>
            </div>
        </div>
        <msg-mask ref="msgMaskbtn" />
    </div>
</template>

<script>
import axios from "axios";
import MsgMask from "@/components/MsgMask.vue";
export default {
    components: { MsgMask },
    data() {
        return {
            data: null,
            buyData: null,
            packNow: -1,
            product: {},
            userBagData: null,
        };
    },
    computed: {
        encodeImgUrl() {
            return function (imgName) {
                return this.imgBaseUrl + this.data[imgName];
            };
        },
    },
    methods: {
        btncall() {
            return;
        },
        getImgData() {
            let url = "http://localhost:3000/HYLImg";
            axios
                .get(url)
                .then((res) => {
                    return res.data;
                })
                .then((d) => {
                    this.data = d;
                })
                .then((res) => {
                    this.getBuyData();
                });
            // console.log(this.imgBaseUrl)
        },
        getBuyData() {
            let url = `http://localhost:3000/product/11`;
            axios
                .get(url)
                .then((res) => {
                    return res.data;
                })
                .then((d) => {
                    this.buyData = d;
                    // console.log(d);
                });
        },
        changePack(i) {
            this.packNow = i;
            //传递商品信息。
            this.product = this.buyData.data.productSet[this.packNow];
        },

        /*
            整个addToShopBag的流程
            1.先检查用户是否选择了商品，没有就返回
            2.再检查用户是否是登录状态，没有就显示一个提示框，并且进入到登录页面
            3.转换浏览器缓存的user数据，利用JSON.parse方法
            4.get方式获取到用户的购物袋的信息，使用一个变量保存获取到的购物袋数据，并且在回调函数then里写后续操作
            5.拿到购物袋信息以后，调用this.checkProductNum 方法，去检查购物袋里是否有同名的商品
                5.1 注意这里是检查的商品标题
                5.2 this.checkProductNum 接收一个字符串做参数
                5.3 检查完成后会返回一个重复的商品对象，或是一个空对象
            6.如果是重复的商品的话，就原封不动的给他put回去，只需要将商品的num属性+1即可
            7.如果是第一次添加商品的话，就使用原来的post请求去添加商品，记住post的参数要加上一个数量属性，值为1

            注：以上 5 - 7 步骤都是在 获取到购物袋信息 的then方法里运行的。
        */
        addToShopBag() {
            let user = sessionStorage.getItem("user");
            //判断是否选择了商品
            if (this.packNow < 0) {
                return;
            }
            // 判断是否登录过，否则就直接返回到登录页面
            if (user == "" || !user) {
                this.$refs.msgMaskbtn.setInformation({
                    title: "未登录",
                    // btnTitle:'去登陆',
                    callback() {
                        this.$router.push("/login");
                    },
                });
                this.$refs.msgMaskbtn.showbtnMask();
                return;
            }

            //解析json字符串为js对象
            user = JSON.parse(user);

            //用户信息已经拿到了,接下来是拿到用户购物袋的信息
            let userurl = `http://localhost:3000/shopBagList?userId=${user.id}`;
            axios.get(userurl).then((res) => {
                // console.log(res.data);
                this.userBagData = res.data;

                let seemProduct = this.checkProductNum(
                    "AirTag - " + this.product.title
                );

                //商品在数据库里的数量如果不等于空
                //就代表着有重复着的数据
                if (seemProduct != null) {
                    let url2 = `http://localhost:3000/shopBagList/${seemProduct.id}`;
                    seemProduct.num += 1;
                    // seemProduct 是重复的商品对象，也就是说其实数据不用更改，直接将之前的数据重写就好了
                    // 另外需要将对象里的num数量+1
                    axios.put(url2, seemProduct).then((res) => {
                        // console.log(res.data)
                        this.$refs.msgMaskbtn.setInformation({
                            title: "添加商品成功",
                        });
                        this.$refs.msgMaskbtn.showbtnMask();
                    });
                } 
                else {
                    //这里是没找到重复商品的操作
                    //正常的添加操作 post
                    let url = `http://localhost:3000/user/${user.id}/shopBagList`;
                    axios
                        .post(url, {
                            title: "AirTag - " + this.product.title,
                            price: this.product.price,
                            img: this.product.proImg,
                            num: 1, //默认的参数 已添加为1
                            //post的参数是一个对象，里面只接受四个参数
                        })
                        .then((res) => {
                            this.$refs.msgMaskbtn.setInformation({
                                title: "添加商品成功",
                            });
                            this.$refs.msgMaskbtn.showbtnMask();
                        });
                }
            });
        },
        checkProductNum(proTitle) {
            //检查用户列表下的商品数量
            //返回值 重复的商品对象
            //参数，需要进行检查的商品标题
            for (const e of this.userBagData) {
                if (e.title == proTitle) {
                    return e;
                }
            }
            return null;
        },
    },
    mounted() {
        this.getImgData();
        // this.getUserBagData()
    },
};
</script>

<style lang="less" scoped>
#byairtag {
    width: 100%;
    height: 100%;
}
</style>
<style scoped src="../assets/css/by-airTag.css"></style>